<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=1"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

		<meta name="keywords" content="easydropdown, jquery, drop-down, bootstrap, front-end, css3, jquery, patrick kunka, barrel, new york, manhattan, mixitup"/>

		<meta name="description" content="A Drop-down Builder for Styleable Inputs and Menus"/>
		<meta property="og:description" content="A Drop-down Builder for Styleable Inputs and Menus"/>
		<meta property="og:type" content="website"/>

		<meta property="og:site_name" content="EasyDropDown"/>
		<meta property="og:title" content="EasyDropDown"/>
		<meta property="og:image" content="http://kunkalabs.com/im/og_logo.png"/>
		<meta property="og:url" content="http://patrickkunka.github.io/easydropdown"/>

		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
			<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<![endif]-->

		<link rel="shortcut icon" type="image/x-icon" href="http://kunkalabs.com/im/favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="demo.css"/>
		<link rel="stylesheet" type="text/css" href="themes/easydropdown.css"/>

		<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="src/jquery.easydropdown.js"></script>
		<title>EasyDropDown - A Drop-down Builder for Styleable Inputs and Menus</title>
	</head>
	<body>
		<header>
			<div class="wrapper just">
			<hgroup>
				<h1>jQuery EasyDropDown</h1>
				<h2>A Drop-down Builder for <strong>Styleable</strong> Inputs and Menus</h2>
			</hgroup>
			<p class="legal">&copy; Copyright 2013 <a href="http://twitter.com/PatrickKunka" target="_blank">Patrick Kunka</a> / <a href="http://kunkalabs.com" target="_blank">kunkalabs.com</a></p>
			</div>
		</header>
		<section>
			<div class="col col_1">
				<div class="wrapper">
					<h3>What Is It?</h3>
					<p>EasyDropDown is a jQuery plugin that effortlessly turns humble <code>&lt;select&gt;</code> elements &hellip;</p>

					<fieldset>

						<select tabindex="1">
							<option value="" class="label">Month</option>
							<option value="1">January</option>
							<option value="2">February</option>
							<option value="3">March</option>
							<option value="4">April</option>
							<option value="5">May</option>
							<option value="6">June</option>
							<option value="7">July</option>
							<option value="8">August</option>
							<option value="9">September</option>
							<option value="10">October</option>
							<option value="11">November</option>
							<option value="12">December</option>
						</select>

						<select tabindex="2">
							<option value="" class="label">Day</option>
							<option value="1">1</option>
							<option value="2">2</option>
					        <option value="3">3</option>
					        <option value="4">4</option>
					        <option value="5">5</option>
					        <option value="6">6</option>
					        <option value="7">7</option>
					        <option value="8">8</option>
					        <option value="9">9</option>
					        <option value="10">10</option>
					        <option value="11">11</option>
					        <option value="12">12</option>
					        <option value="13">13</option>
					        <option value="14">14</option>
					        <option value="15">15</option>
					        <option value="16">16</option>
					        <option value="17">17</option>
					        <option value="18">18</option>
					        <option value="19">19</option>
					        <option value="20">20</option>
					        <option value="21">21</option>
					        <option value="22">22</option>
					        <option value="23">23</option>
					        <option value="24">24</option>
					        <option value="25">25</option>
					        <option value="26">26</option>
					        <option value="27">27</option>
					        <option value="28">28</option>
					        <option value="29">29</option>
					        <option value="30">30</option>
					        <option value="31">31</option>
						</select>

						<select tabindex="3">
							<option value="" class="label">Year</option>
							<option value="2013">2013</option>
							<option value="2012">2012</option>
							<option value="2011">2011</option>
							<option value="2010">2010</option>
						    <option value="2009">2009</option>
						    <option value="2008">2008</option>
						    <option value="2007">2007</option>
						    <option value="2006">2006</option>
						    <option value="2005">2005</option>
						    <option value="2004">2004</option>
						    <option value="2003">2003</option>
						    <option value="2002">2002</option>
						    <option value="2001">2001</option>
						    <option value="2000">2000</option>
						    <option value="1999">1999</option>
						    <option value="1998">1998</option>
						    <option value="1997">1997</option>
						    <option value="1996">1996</option>
						    <option value="1995">1995</option>
						    <option value="1994">1994</option>
						    <option value="1993">1993</option>
						    <option value="1992">1992</option>
						    <option value="1991">1991</option>
						    <option value="1990">1990</option>
						</select>

					</fieldset>

					<p>&hellip; into <strong>styleable drop-down menus</strong> for use in forms or general UI/navigation.</p>

					<fieldset>

						<select tabindex="4" class="dropdown">
							<option value="" class="label" value="">Month</option>
							<option value="1">January</option>
							<option value="2">February</option>
							<option value="3">March</option>
							<option value="April">April</option>
							<option value="5">May</option>
							<option value="6">June</option>
							<option value="7">July</option>
							<option value="8">August</option>
							<option value="9">September</option>
							<option value="10">October</option>
							<option value="11">November</option>
							<option value="12">December</option>
						</select>

						<select tabindex="5" class="dropdown" data-settings='{"cutOff": 12}'>
							<option value="" class="label">Day</option>
							<option value="1">1</option>
							<option value="2">2</option>
					        <option value="3">3</option>
					        <option value="4">4</option>
					        <option value="5">5</option>
					        <option value="6">6</option>
					        <option value="7">7</option>
					        <option value="8">8</option>
					        <option value="9">9</option>
					        <option value="10">10</option>
					        <option value="11">11</option>
					        <option value="12">12</option>
					        <option value="13">13</option>
					        <option value="14">14</option>
					        <option value="15">15</option>
					        <option value="16">16</option>
					        <option value="17">17</option>
					        <option value="18">18</option>
					        <option value="19">19</option>
					        <option value="20">20</option>
					        <option value="21">21</option>
					        <option value="22">22</option>
					        <option value="23">23</option>
					        <option value="24">24</option>
					        <option value="25">25</option>
					        <option value="26">26</option>
					        <option value="27">27</option>
					        <option value="28">28</option>
					        <option value="29">29</option>
					        <option value="30">30</option>
					        <option value="31">31</option>
						</select>

						<select tabindex="6" class="dropdown" data-settings='{"cutOff": 12}'>
							<option value="" class="label">Year</option>
							<option value="2013">2013</option>
							<option value="2012">2012</option>
							<option value="2011">2011</option>
							<option value="2010">2010</option>
						    <option value="2009">2009</option>
						    <option value="2008">2008</option>
						    <option value="2007">2007</option>
						    <option value="2006">2006</option>
						    <option value="2005">2005</option>
						    <option value="2004">2004</option>
						    <option value="2003">2003</option>
						    <option value="2002">2002</option>
						    <option value="2001">2001</option>
						    <option value="2000">2000</option>
						    <option value="1999">1999</option>
						    <option value="1998">1998</option>
						    <option value="1997">1997</option>
						    <option value="1996">1996</option>
						    <option value="1995">1995</option>
						    <option value="1994">1994</option>
						    <option value="1993">1993</option>
						    <option value="1992">1992</option>
						    <option value="1991">1991</option>
						    <option value="1990">1990</option>
						</select>

					</fieldset>

					<p>It's like <em><a href="http://harvesthq.github.io/chosen/" target="_blank">Chosen</a></em> but with only the essential features:</p>

					<ul class="text">
						<li>Clean, semantic markup</li>
						<li>Form &amp; validation compatibilty</li>
						<li>Full keyboard control with textual search</li>
						<li>Inner-scroll for long lists</li>
						<li>Degradation to native UI on touch devices</li>
						<li>Fully functional IE8+</li>
					</ul>

					<a href="https://github.com/patrickkunka/easydropdown" target="_blank" class="btn ib">Fork it on GitHub</a>

					<p class="ib"><a href="https://github.com/patrickkunka/easydropdown/archive/master.zip">or download .ZIP</a></p>

					<h3>Latest updates v2.1.4</h3>

					<ul class="text">
						<li>Menu height is now calculated in real time to allow for responsive typography, modals etc.</li>
						<li>Various bug fixes</li>
					</ul>

					<h3>Available Ready-made Themes</h3>

					<h4>Default / <a href="themes/easydropdown.css">easydropdown.css</a></h4>

					<select class="dropdown" tabindex="7">
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>

					<h4>Metro / <a href="themes/easydropdown.metro.css">easydropdown.metro.css</a></h4>

					<select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'>
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>

					<h4>Flat / <a href="themes/easydropdown.flat.css">easydropdown.flat.css</a></h4>

					<select class="dropdown" tabindex="9" data-settings='{"wrapperClass":"flat"}'>
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>
				</div>
			</div>
			<div class="col col_2">
				<div class="wrapper">
					<h3>How To Use It</h3>

					<p>To use, simply include the <em>jquery.easydropdown.min.js</em> script in your page and give your <code>&lt;select&gt;</code> tags the class <code>dropdown</code>:</p>

					<pre class="prettyprint lang-html">&lt;select class="dropdown"&gt;
	&lt;option value="1"&gt;Option 1&lt;/option&gt;
	&lt;option value="2"&gt;Option 2&lt;/option&gt;
	&lt;option value="3"&gt;Option 3&lt;/option&gt;
	&lt;option value="4"&gt;Option 4&lt;/option&gt;
&lt;/select&gt;</pre>

					<p>If you are using labels within the <code>&lt;select&gt;</code> element, identify them with the class <code>label</code>:

					<pre class="prettyprint lang-html">&lt;select class="dropdown"&gt;
	&lt;option value="" class="label"&gt;Month&lt;/option&gt;
	&lt;option value="1"&gt;January&lt;/option&gt;
	&lt;option value="2"&gt;February&lt;/option&gt;
	&lt;option value="3"&gt;March&lt;/option&gt;
	...
&lt;/select&gt;</pre>

					<p>To build your dropdown with an arbitrary option pre-selected, simply give it the <code>selected</code> attribute as you normally would:</p>

					<pre class="prettyprint lang-html">&lt;select class="dropdown"&gt;
	&lt;option value="" class="label"&gt;Month&lt;/option&gt;
	&lt;option value="1"&gt;January&lt;/option&gt;
	&lt;option value="2" selected&gt;February&lt;/option&gt;
	&lt;option value="3"&gt;March&lt;/option&gt;
	...
&lt;/select&gt;</pre>

					<p>Similarly, a dropdown may be disabled with the <code>disabled</code> attribute:</p>

					<pre class="prettyprint lang-html">&lt;select class="dropdown" disabled&gt;
	&lt;option value="" class="label"&gt;Month&lt;/option&gt;
	&lt;option value="1"&gt;January&lt;/option&gt;
	&lt;option value="2"&gt;February&lt;/option&gt;
	&lt;option value="3"&gt;March&lt;/option&gt;
	...
&lt;/select&gt;</pre>

					<p>No custom JS required!</p>

					<h3>How To Style It</h3>

					<p>Either create your own styles to match your design and branding, or use one of our ready made themes. We recommend starting with the default theme and customizing&nbsp;it.</p>
					<p>Each drop-down has the following basic markup structure that you can target with your CSS:</p>

					<pre class="prettyprint lang-html">&lt;div class="dropdown"&gt;
	&lt;span class="old"&gt;
		&lt;select&gt;...&lt;/select&gt;
	&lt;/span&gt;
	&lt;span class="selected"&gt;Option 1&lt;/span&gt;
	&lt;span class="carat"&gt;&lt;/span&gt;
	&lt;div&gt;
		&lt;ul&gt;
			&lt;li&gt;Option 1&lt;/li&gt;
			&lt;li&gt;Option 2&lt;/li&gt;
			&lt;li&gt;Option 3&lt;/li&gt;
			&lt;li&gt;Option 4&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>

					<p>The following classes are added/removed dynamically:</p>

					<ul class="text">
						<li><strong>.focus</strong> <em>(container)</em><br/>On input focus</li>
						<li><strong>.open</strong> <em>(container)</em><br/>On menu open</li>
						<li><strong>.scrollable</strong> <em>(container)</em><br/>When in scroll mode (see cutOff)</li>
						<li><strong>.bottom</strong> <em>(container)</em><br/>On scroll bottom-out</li>
						<li><strong>.touch</strong> <em>(container)</em><br/>When in native touch UI mode (see nativeTouch)</li>
						<li><strong>.disabled</strong> <em>(container)</em><br/>When disabled</li>
						<li><strong>.focus</strong> <em>(menu item)</em><br/>On hover or keyboard focus</li>
						<li><strong>.active</strong> <em>(menu item)</em><br/>Selected menu item</li>
					</ul>

					<h3>Advanced Usage</h3>

					<p>Alternatively, by not using the class 'dropdown' you can instantiate your dropdowns manually in your javascript, with custom settings.</p>

					<pre class="prettyprint">$(function(){
	var $selects = $('select');

	$selects.easyDropDown({
		cutOff: 10,
		wrapperClass: 'my-dropdown-class',
		onChange: function(selected){
			// do something
		}
	});
});</pre>

				<p>You may also define your customizable settings directly in your HTML via a JSON Object in the data-settings attribute:</p>

				<pre class="prettyprint lang-html">&lt;select class="dropdown" 
	data-settings='{"cutOff":6}'&gt;
	&lt;option value="1"&gt;Option 1&lt;/option&gt;
	&lt;option value="2"&gt;Option 2&lt;/option&gt;
	..
&lt;/select&gt;</pre>

				<p>The "onchange" attribute may be applied as normal:</p>

				<pre class="prettyprint lang-html">&lt;select class="dropdown" onchange="alert(this.value)"&gt;
	&lt;option value="1"&gt;Option 1&lt;/option&gt;
	&lt;option value="2"&gt;Option 2&lt;/option&gt;
	..
&lt;/select&gt;</pre>

				<h3>Customizable Settings</h3>
				<ul class="text">
					<li><strong>cutOff</strong> <em>(integer)</em><br/>
						The maximum number of items to show before scrolling (default <code>false</code>).</li>
					<li><strong>wrapperClass</strong> <em>(string)</em><br/>
						The class of the parent wrapper element, used to target styling (default <code>'dropdown'</code>).</li>
					<li><strong>onChange</strong> <em>(function)</em><br/>
						A custom function to call when an item is selected. Useful for non-form input uses. An object containing the selected item's value and title is passed as an argument.</li>
					<li><strong>nativeTouch</strong> <em>(boolean)</em><br/>
						Fallback to native UI on touch-enabled devices (default <code>true</code>).</li>


				</ul>

				<h3>Methods</h3>
				<ul class="text">
					<li><strong>.easyDropDown(</strong>'disable'<strong>)</strong><br/>
						Disable the dropdown.</li>
					<li><strong>.easyDropDown(</strong>'enable'<strong>)</strong><br/>
						Enable the dropdown.</li>
					<li><strong>.easyDropDown(</strong>'destroy'<strong>)</strong><br/>
						Remove all generated elements and unbind all handlers.</li>
					<li><strong>.easyDropDown(</strong>'select', <em>index/value</em><strong>)</strong><br/>
						Programmatically select option by index (integer) or value (string).</li>
					<li><strong>.val()</strong><br/>
						Get selected value.</li>
				</ul>
			</div>
		</section>

		<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		  ga('create', 'UA-39510854-3', 'patrickkunka.github.io');
		  ga('send', 'pageview');
			//king
		</script>

	</body>
</html>